<template>
	<view class="audio-page">
		<view class="box-left">
			<image class="box-img" :src="image" mode="aspectFill"></image>
			<view class="page-btn" @click="clickAudio">
				<image :src="music_play ? stop_img : start_img" mode="widthFix"></image>
			</view>
		</view>
		<view class="box-content">
			<view class="content-name">{{ title }}</view>
			<view class="progress">
				<text>{{ getMinuteTime(now_time) }}</text>
				<slider :value="now_time / total_time * 100" block-size="10" block-color="#FF3333" activeColor="#FF3333"
					@change="sliderChange"></slider>
				<text>{{ getMinuteTime(total_time) }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onHide } from "@dcloudio/uni-app"
import { ref, onMounted, onUnmounted } from 'vue';
import { start_img, stop_img } from './imgUrl.js';

// 定义响应式变量
const props = defineProps({
	music: {
		type: String,
		required: true
	},
	image: {
		type: String,
		required: true
	},
	title: {
		type: String,
		required: true
	}
});

const music_play = ref(false);
const now_time = ref(0);
const total_time = ref(0);
const audioManager = ref(null);

// 初始化音频管理器
const initAudioManager = () => {
	audioManager.value = uni.getBackgroundAudioManager();
	audioManager.value.src = props.music;
	audioManager.value.title = props.title;

	// 监听音频播放事件
	audioManager.value.onPlay(() => {
		music_play.value = true;
	});

	// 监听音频暂停事件
	audioManager.value.onPause(() => {
		music_play.value = false;
	});

	// 监听音频时间更新事件
	audioManager.value.onTimeUpdate(() => {
		now_time.value = audioManager.value.currentTime;
		total_time.value = audioManager.value.duration;
	});

	// 监听音频加载完成事件
	audioManager.value.onCanplay(() => {
		total_time.value = audioManager.value.duration;
	});

	// 监听音频播放结束事件，实现循环播放
	audioManager.value.onEnded(() => {
		// 音频播放结束，重新播放
		audioManager.value.seek(0);
		audioManager.value.play();
	});
};

// 点击切换播放/暂停
const clickAudio = () => {
	if (music_play.value) {
		audioManager.value.pause();
	} else {
		audioManager.value.play();
	}
};

// 进度条改变时调整播放进度
const sliderChange = (e) => {
	const percentage = e.detail.value;
	const position = (percentage / 100) * total_time.value;
	audioManager.value.seek(position);
};

// 格式化时间
const getMinuteTime = (seconds) => {
	const minutes = Math.floor(seconds / 60);
	const secs = Math.floor(seconds % 60);
	return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

onMounted(() => {
	initAudioManager();
});
onHide(() => {
	console.log(111111, 22222)
	// 页面隐藏时，可尝试重新播放，确保后台也能循环
	if (audioManager.value) {
		initAudioManager();
	}
});

onUnmounted(() => {
	if (audioManager.value) {
		audioManager.value.pause();
		audioManager.value.offPlay();
		audioManager.value.offPause();
		audioManager.value.offTimeUpdate();
		audioManager.value.offCanplay();
		audioManager.value.offEnded(); // 移除结束事件监听
		audioManager.value = null;
	}
});
</script>

<style lang="scss">
.audio-page {
	width: 100%;
	height: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 3rpx 3rpx 6rpx #ccc;
	margin-bottom: 30rpx;

	.box-left {
		width: 24%;
		height: 150rpx;
		position: relative;
		display: flex;

		.box-img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
		}

		.page-btn {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 3;

			image {
				width: 50rpx;
				height: 50rpx;
				background-color: rgba($color: #000000, $alpha: 0.3);
				border-radius: 50%;
			}
		}
	}

	.box-content {
		width: 75%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;

		.content-name {
			width: 100%;
			display: -webkit-box;
			/* 弹性盒模型 */
			-webkit-box-orient: vertical;
			/* 元素垂直居中*/
			-webkit-line-clamp: 1;
			/*  文字显示的行数*/
			overflow: hidden;
			/* 超出隐藏 */
		}

		.progress {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			slider {
				width: 80%;
			}
		}
	}
}
</style>